<?php
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

?>
<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link href="../public/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
        <link href="../public/css/font-awesome.css?v=4.4.0" rel="stylesheet">

        <link href="../public/css/animate.css" rel="stylesheet">
        <link href="../public/css/style.css?v=4.1.0" rel="stylesheet">

        <link href="../public/css/paging.css" rel="stylesheet">
        <link href="../public/css/jquery.timepicker.css" rel="stylesheet">
        <style type="text/css">
            #allsubroute{

            }
            .subroute{

            }
            .closesite{
                font-size:1em;
            }
        </style>
    </head>

    <body class="gray-bg">

        <div class="wrapper wrapper-content animated fadeInUp">
            <div class="row">
                <div class="col-sm-12">

                    <div class="ibox">
                        <div class="ibox-title">
                            <h5>日统计</h5>
                            <div class="ibox-tools">

                            </div>
                        </div>
                        <div class="ibox-content">
                            <div style="width:100%;margin-bottom:10px;">
                                <div class="input-group">
<!--                                    <select class="form-control m-b" id="mouth"  style="height: auto;">   
                                        <option value="0">——请选择月份——</option>
                                        <option value="1">——一月——</option>
                                        <option value="2">——二月——</option>
                                        <option value="3">——三月——</option>
                                        <option value="4">——四月——</option>
                                        <option value="5">——五月——</option>
                                        <option value="6">——六月——</option>
                                        <option value="7">——七月——</option>
                                        <option value="8">——八月——</option>
                                        <option value="9">——九月——</option>
                                        <option value="10">——十月——</option>
                                        <option value="11">——十一月——</option>
                                        <option value="12">——十二月——</option>
                                    </select>-->
                                    <input type="text" id="searchdate" value="" class="form-control" placeholder="输入时间">
                                    <div id="routelist" style="width:100%;max-height:300px;overflow-y: scroll;overflow-x: hidden;display: none;">

                                    </div>
                                    <span class="input-group-btn"> 
                                        <button class="btn btn-sm btn-primary" id="search">搜索</button>
                                    </span>
                                </div>
                            </div>
                            <div style="width:100%;height:500px;" id="mychart"></div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 全局js -->
        <script src="../public/js/jquery.min.js?v=2.1.4"></script>
        <script src="../public/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="../public/js/plugins/layer/layer.min.js"></script>

        <!-- 自定义js -->
        <script src="../public/js/paging.js?v=1.0.1"></script>
        <script src="../public/js/upload.js?v=1.0.0"></script>
        <script src="../public/js/common.js?v=1.0.4"></script>
        <script src="../public/js/jquery.datetimepicker.full.min.js?lang=zh"></script>
        <script src="../public/js/echarts.min.js"></script>
        <script>

            $("#searchdate").datetimepicker({
                lang: 'ch',
                format: 'Y-m-d',
                timepicker: false
            });
            $("#searchroute").bind("input propertychange", function () {
                var route = $(this).val();
                var datastr = "cont=1&route=" + route;
                $("#routelist").empty();
                $.ajax({
                    url: "/../../controller/search.php",
                    type: "POST",
                    data: datastr,
                    success: function (e) {
                        var res = eval("(" + e + ")");
                        var html = "";
                        $(res.data).each(function (k, v) {
                            html += '<div class="mystaff" style="width:100%;height:40px;text-align: center;line-height:40px;border-bottom: 1px solid #e0e0e0;" data-name="' + v.name + '" data-id="' + v.id + '" onclick="javascript:clickchange(this);">' + v.name + '</div>';
                        });
                        $("#routelist").show();
                        $("#routelist").append(html);
                    }
                });
            });
            function clickchange(obj) {
                $("#routelist").hide();
                $("#searchroute").val($(obj).data("name"));
                $("#routeid").val($(obj).data("id"));
            }
            $("#search").click(function () {
                var url = "count.php";
                var date = $("#searchdate").val();
                var routeid = $("#routeid").val();
                var route = $("#searchroute").val();
                var datastr = "?date=" + date + "&routeid=" + routeid + "&route=" + route;
                var finalurl = url + datastr;
                window.location.href = finalurl;
            });
            var a = ["3","1","0","12","22","48","112","77","102","50","158","120"];
            //console.log(a);
            var b = ["00时","02时","04时","06时","08时","10时","12时","14时","16时","18时","20时","22时"];
            var c = ["6.99","2.33","0","27.96","51.26","111.84","260.96","179.41","237.66","150.33","340.88","232.8"];
            var d = ["3","1","0","22","10","48","135","81","102","65","120","102"];
            var e = ["6.99","2.33","0","27.96","51.26","111.84","260.96","179.41","237.66","150.33","340.88","232.8"];
            var daynumber = 1;
            var daytotal = 0.01;
            var mouthnumber = 1;
            var mouthtotal = 0.01;
            var str1 = '扣除券';
            var str2 = '满减券';
            console.log(str1 + "   " + str2);
            //console.log(b);
            var myChart = echarts.init(document.getElementById('mychart'));
            var option = {
                title: {
                    left: 'left',
                    text: '统计',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{a}:{c}',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                grid: {
                    show: false,
                    top: '30',
                    bottom: '60',
                    right: '60',
                    left: '60'
                },
                legend: {
                    show: true,
                    selectedMode: 'single',
                    bottom: 10,
                    left: 50,
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    },
                    itemGap: 20,
                    data: [str1, str2]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: b,
                        axisPointer: {
                            type: 'shadow'

                        },

                        axisTick: {
                            show: true,
                            interval: 0
                        }
                    }

                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '数量',
                        show: true,
                        interval: 50
                    },
                    {
                        type: 'value',
                        name: '总价',
                        interval: 10
                    }

                ],
                series: [
                    {
                        name: str1,
                        type: 'bar',
                        data: a,
                        barWidth: '50%'
                    },
                    {
                        name: str1,
                        type: 'line',
                        yAxisIndex: 1,
                        data: c,
                        symbolSize: 10
                    },
                    {
                        name: str2,
                        type: 'bar',
                        data: d,
                        barWidth: '50%'
                    },
                    {
                        name: str2,
                        type: 'line',
                        yAxisIndex: 1,
                        data: e,
                        symbolSize: 10,
                        itemStyle: {
                            normal: {
                                color: "#87CEFA"
                            }

                        }
                    }
                ]
            };
            myChart.setOption(option);

        </script>

    </body>
</html>